<!DOCTYPE html>
<html>
    <style>
        body{
            background:url('/static/img/wallpaper.jpg') no-repeat;
            background-size:cover;;
        }
        button{
            height:40px;
            width:100px;
            display:block;
            /* margin:45px auto ; */
            border-radius: 25px;
        }
        </style>
        <head>
        </head>
        <body>
            <div class="table">
                <canvas id="canvas" height="450" width="450"></canvas>
                <!-- <div class="text"> -->
                    <textarea id="textarea" rows="25" cols="50" disabled></textarea>
                <!-- </div> -->
                <!-- <div> -->
                    <div class="input">
                        <input type="text" id="input"> 
                    <!-- </div> -->
                    <!-- <div class="send"> -->
                        <button id="button" onclick="SendText()">send</button>
                    </div>
                <!-- </div> -->
            </div>
            
            
            <!-- <button id="restart">重新开始</button> -->
        </body>
        <!-- script全局变量 -->
        <script>
            var available=0;
            var chess=0;
            var type=0;
            var layout=[];
            var text='';
            var end=0;
            var ws=new WebSocket('ws://'+window.location.host+'/gobang/battle/'+{{roomID}}+'/');
            for(var i=0;i<18;i++){
                layout[i]=[];
                for(var j=0;j<18;j++){
                    layout[i][j]=0;
                }
            }
        </script>
        <script>
        //获得画板
        var bord=document.getElementById("canvas");
        //获得画笔（上下文）
        var context=bord.getContext("2d");
        //true为白棋,false为黑棋
        // var me=false;
        //棋盘数组，0代表没有棋子，1代表白棋，2代表黑棋
        // var chessBorad=[];
        // for(var i=0;i<15;i++){
        //     chessBorad[i]=[];
        //     for(var j=0;j<15;j++){
        //         chessBorad[i][j]=0;
        //     }
        // }
        //获得按钮
        // var restart=document.getElementById("restart");
        </script>

        <script>
        //绘画棋盘的方法
        function drawChessBorad(){
            context.strokeStyle="#4d4d4d";//改变线条的颜色
            for(var i=0;i<15;i++){
                //棋盘的竖线
                context.moveTo(15+i*30,15);//起点
                context.lineTo(15+i*30,435);//终点
                context.stroke();//连线
                //棋盘的横线
                context.moveTo(15,15+i*30);//起点
                context.lineTo(435,15+i*30);//终点
                context.stroke();
            }
        }

        window.onload=function(){
            drawChessBorad();
        }
        </script>

        <script>
        //画棋子
        function drawChess(i,j,chess){//i纵坐标,j横坐标
            context.beginPath();
            context.arc(15+j*30,i*30+15,13,0,Math.PI*2,false);
            context.closePath();
            context.stroke();
            //设置渐变色 径向渐变
            var grd=context.createRadialGradient(15+j*30+2,i*30+15-2,10,15+j*30+2,i*30+15-2,0);
            if(chess==-1){//白棋
                grd.addColorStop(0,"#d1d1d1");
                grd.addColorStop(1,"#f9f9f9");
                // chessBorad[i][j]=1;
            }else if(chess==1){//黑棋
                grd.addColorStop(0,"#0a0a0a");
                grd.addColorStop(1,"#636767");
                // chessBorad[i][j]=2;
            }else{
                grd.addColorStop(0,"#005197");
                grd.addColorStop(1,"#005197");
            }
            
            context.fillStyle=grd;//设置填充色
            context.fill();
        }
        //画板的鼠标点击事件
        bord.onclick=function(e){
            if(available==0){
                var x=e.offsetX;
                var y=e.offsetY;
                var i=Math.floor(y/30);
                var j=Math.floor(x/30);
                console.log('i',i);
                console.log('j',j);
                if(layout[i][j]==0){
                    // available=(available+1)%3;
                    SendPosition(i,j);
                    // drawChess(i,j,me);//画棋子
                    // win(i,j,me);
                    // me=!me;
                }
            }
            
        }
        //重新游戏
        // restart.onclick=function(){
        //     clearChess();
        // }
        //清空棋子
        function clearChess(){//当canvas的高度或者宽度重新设置时将清空画布
            chess.height=chess.height;
            drawChessBorad();  
        }
        </script>

        <!-- websocket通信 -->
        <script>
            ws.onmessage=function(j){
                data=JSON.parse(j.data)
                type=data.type;
                data=data.data;
                // console.log(type);
                // console.log(data);
                
                if(type=='start'){
                    alert("对局开始！");
                    chess=data;
                    if(chess==-1){
                        available=1;
                    }
                }else if(type=='layout'){
                    available=(available+1)%2;
                    clearChess();
                    drawChessBorad();
                    layout=data;
                    for (var i = 0; i < layout.length; i++) {
                        for(var j=0;j<layout.length;j++){
                            if(layout[i][j]!=0){
                                drawChess(i,j,layout[i][j]);
                            }
                        }
                    }
                }else if(type=='text'){
                    text=data;
                    document.getElementById("textarea").value=document.getElementById("textarea").value+'\n'+text;
                }else if(type=='end'){
                    end=data;
                    console.log('end');
                    // alert(end);
                    for(var i=0;i<end.length;i++){
                        console.log(end[i][0],end[i][1],0);
                    }
                    for(var i=0;i<end.length;i++){
                        drawChess(end[i][0],end[i][1],0);
                    }
                    alert("对局结束！");
                    ws.close();
                }
            };

            function getCookie(cname)
            {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for(var i=0; i<ca.length; i++) 
                {
                    var c = ca[i].trim();
                    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
                }
                return "";
            }

            function SendPosition(x,y){
                position=JSON.stringify({
                    'email':getCookie('email'),
                    'type':'position',
                    'data':[x,y,chess],
                });
                ws.send(position);
            }

            function SendText(){
                text=JSON.stringify({
                    'type':'text',
                    'data':document.getElementById("input").value,
                });
                ws.send(text);
                document.getElementById("input").value="";
            }

            ws.onclose=function(){
                alert('连接已断开！');
            }
        </script>
</html>